import React, { Component, Fragment } from "react";
import {
  SideTop,
  SideMiddle,
  SideBot,
  SideCollect,
  TopItem,
  CollectItem
} from "../style";
import { connect } from "react-redux";
class SideList extends Component {
  render() {
    const { topItemList, botItemList, collectList } = this.props;
    return (
      <Fragment>
        <SideTop>
          {topItemList.map(item => {
            return (
              <TopItem key={item.get("id")}>
                <i className="iconfont icon">{item.get("icon")}</i>
                <p className="title">{item.get("title")}</p>
              </TopItem>
            );
          })}
        </SideTop>
        <SideMiddle>
          <div>
            <div className="flex">
              <span>
                <i className="iconfont icon">&#xe658;</i>
                <span className="title">创作者中心</span>
                <span className="level">Lv1</span>
              </span>
              <i>></i>
            </div>
            <div className="border-line">
              <div className="left-line">
                <p className="yesterday comm">昨日被阅读数</p>
                <span className="num read">0</span>
                <p className="comm">
                  较前日<span className="num">100%</span>
                </p>
              </div>
              <div className="none">
                <p className="like-yes comm">昨日获赞同数</p>
                <span className="num read">0</span>
                <p className="comm">较前日--</p>
              </div>
            </div>
            <div className="border-line">
              瓦力保镖为你的创造提供持续保护
              <i></i>
            </div>
          </div>
        </SideMiddle>
        <SideBot>
          {botItemList.map(item => {
            return (
              <TopItem key={item.get("id")}>
                <i className="iconfont icon">{item.get("icon")}</i>
                <p>{item.get("title")}</p>
              </TopItem>
            );
          })}
        </SideBot>
        <SideCollect>
          {collectList.map(item => {
            return (
              <CollectItem key={item.get('id')}>
                <p className="collectFlex">
                  <span>
                    <i className="iconfont">{item.get("icon")}</i>
                    <span className="space">{item.get("title")}</span>
                  </span>
                  <i className={item.get("number") ? "hint" : ""}>
                    {item.get("number")}
                  </i>
                </p>
              </CollectItem>
            );
          })}
        </SideCollect>
      </Fragment>
    );
  }
}

const mapStateToProps = state => {
  return {
    topItemList: state.getIn(["home", "topItemList"]),
    botItemList: state.getIn(["home", "botItemList"]),
    collectList: state.getIn(["home", "collectList"])
  };
};

export default connect(mapStateToProps, null)(SideList);
